import { useState } from 'react';
import './index.css'
// 引入唯一生成id的库nanoid
import { nanoid } from 'nanoid'
import { Input } from 'antd';

export default (props) => {
    // const handleInput = (event) => {
    //     const {keyCode,target} = event
        // if(keyCode === 13){
        //     console.log(target.value);
        //     // if(targer.value.trim() === ''){
        //     //     // 去除空格之后为空字符串
        //     //     alert('输入的代办事项不可以为空哦~')
        //     //     return
        //     // }
        // }

        // console.log(target.value);

        // // 生成一个新的todo
        // // 把输入框中的元素作为新todo的name传给父组件
        // const todoObj = {
        //     id:nanoid(),
        //     name:target.value,
        //     done:false
        // }

        // props.addTodo(todoObj)

        // 添加完todo之后清空输入框
    //     target.value = ''
    // }
    // 初始化输入框的值为空
    const [info,setInfo] = useState('')
    const onChange = event => {
        // 当输入框的值改变时，做一个info更新并渲染
        const {target} = event
        setInfo(target.value)
    }
    const onPressEnter = event => {
        const {target} = event
        if(target.value.trim() === ''){
            alert('输入的事项不可以为空喔~')
            return 
        }

        const todoObj = {
            id:nanoid(),
            name:target.value,
            done:false
        }
        props.addTodo(todoObj)

        // 当回车回调把新的todoObj传给父组件更新完数据库之后
        // 要将输入框的内容清空
        setInfo('')
    }
    return (
        <div className = 'todo_header'>
            <Input value={info} onChange = {onChange} placeholder="请输入你的任务~" onPressEnter={onPressEnter}/>
        </div>

    )
}